<!DOCTYPE html>
<html lang="cn">
<!-- 这是毛毛熊学习【前端三件套】后，自己照着B站写的练习项目 -->
<!-- 这是毛毛熊学习【前端三件套】后，自己照着B站写的练习项目 -->
<!-- 这是毛毛熊学习【前端三件套】后，自己照着B站写的练习项目 -->
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>bilibili</title>
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <!-- 背景图横幅 -->
  <header class="header">
    <a class="bili_logo" href="https://www.bilibili.com/"> </a>
    <!-- 最顶上的导航栏 -->
    <div class="head_bar">
      <ul class="head_bar_left">
        <li>
          <a class="head_bar_left_iconword" href="https://www.bilibili.com/">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"
              class="zhuzhan-icon">
              <path fill-rule="evenodd" clip-rule="evenodd"
                d="M3.73252 2.67094C3.33229 2.28484 3.33229 1.64373 3.73252 1.25764C4.11291 0.890684 4.71552 0.890684 5.09591 1.25764L7.21723 3.30403C7.27749 3.36218 7.32869 3.4261 7.37081 3.49407H10.5789C10.6211 3.4261 10.6723 3.36218 10.7325 3.30403L12.8538 1.25764C13.2342 0.890684 13.8368 0.890684 14.2172 1.25764C14.6175 1.64373 14.6175 2.28484 14.2172 2.67094L13.364 3.49407H14C16.2091 3.49407 18 5.28493 18 7.49407V12.9996C18 15.2087 16.2091 16.9996 14 16.9996H4C1.79086 16.9996 0 15.2087 0 12.9996V7.49406C0 5.28492 1.79086 3.49407 4 3.49407H4.58579L3.73252 2.67094ZM4 5.42343C2.89543 5.42343 2 6.31886 2 7.42343V13.0702C2 14.1748 2.89543 15.0702 4 15.0702H14C15.1046 15.0702 16 14.1748 16 13.0702V7.42343C16 6.31886 15.1046 5.42343 14 5.42343H4ZM5 9.31747C5 8.76519 5.44772 8.31747 6 8.31747C6.55228 8.31747 7 8.76519 7 9.31747V10.2115C7 10.7638 6.55228 11.2115 6 11.2115C5.44772 11.2115 5 10.7638 5 10.2115V9.31747ZM12 8.31747C11.4477 8.31747 11 8.76519 11 9.31747V10.2115C11 10.7638 11.4477 11.2115 12 11.2115C12.5523 11.2115 13 10.7638 13 10.2115V9.31747C13 8.76519 12.5523 8.31747 12 8.31747Z"
                fill="currentColor"></path>
            </svg>
            <span>首页</span>
          </a>
        </li>
        <li> <a><span>番剧</span></a></li>
        <li class="head_bar_left_popitem_live">
          <a>
            <span>直播</span>
          </a>
          <div class="popitem_live">
            <div class="popitem_live_left">
              <div class="popitem_live_title">热门直播：</div>
              <div class="popitem_live_gird">
                <a>
                  <div class="popitem_live_gird_avatar"></div>
                  <div class="popitem_live_gird_title">我是图片1</div>
                </a>
                <a>
                  <div class="popitem_live_gird_avatar"></div>
                  <div class="popitem_live_gird_title">哔哩哔哩王者荣耀赛事</div>
                </a>
                <a>
                  <div class="popitem_live_gird_avatar"></div>
                  <div class="popitem_live_gird_title">我是图片3</div>
                </a>
                <a>
                  <div class="popitem_live_gird_avatar"></div>
                  <div class="popitem_live_gird_title">我是图片4</div>
                </a>
                <a>
                  <div class="popitem_live_gird_avatar"></div>
                  <div class="popitem_live_gird_title">哔哩哔哩王者荣耀赛事</div>
                </a>
                <a>
                  <div class="popitem_live_gird_avatar"></div>
                  <div class="popitem_live_gird_title">哔哩哔哩王者荣耀赛事</div>
                </a>
              </div>
            </div>
            <div class="popitem_live_right">
              <div class="popitem_live_title">热门活动：</div>
              <a class="popitem_live_activity1"></a>
              <a class="popitem_live_activity2"></a>
            </div>
          </div>
        </li>
        <li class="head_bar_left_popitem_game">
          <a>
            <span>游戏中心</span>
          </a>
          <div class="popitem_game">
            <div class="popitem_game_left">
              <a class="popitem_game_left_big">
                <div class="popitem_game_left_big_title">命运-冠位指定（Fate/GO）</div>
              </a>
              <div class="popitem_game_left_pannel">
                <a class="popitem_game_left_pannel_icon">
                  <div class="popitem_game_left_pannel_title">碧蓝航线</div>
                </a>
                <a class="popitem_game_left_pannel_icon">
                  <div class="popitem_game_left_pannel_title">坎特伯雷公主与骑士唤醒冠军之剑的奇幻冒险</div>
                </a>
                <a class="popitem_game_left_pannel_icon">
                  <div class="popitem_game_left_pannel_title">时空猎人3</div>
                </a>
              </div>
            </div>
            <div class="popitem_game_right">
              <div class="popitem_game_right_container">
                <div class="popitem_game_right_title">新游预告</div>
                <a class="popitem_game_right_list"> 欢迎来到梦乐园</a>
                <a class="popitem_game_right_list"> 依露希尔：星晓</a>
                <a class="popitem_game_right_list"> 方寸对决</a>
                <a class="popitem_game_right_list"> 饥荒：新家园</a>
                <a class="popitem_game_right_list"> 全明星街球派对</a>
                <a class="popitem_game_right_list"> 高能英雄</a>
                <a class="popitem_game_right_list"> 第七史诗</a>
                <div class="popitem_game_right_img"></div>
              </div>
            </div>
          </div>
        </li>
        <li><a><span>会员购</span></a></li>
        <li class="head_bar_left_popitem_comic">
          <a>
            <span>漫画</span>
          </a>
        </li>
        <li><a><span>赛事</span></a></li>
        <li class="head_bar_left_slide">
          <a class="head_bar_left_slide_wrapper">
            <div>说出爱</div>
            <img src="./public/say-loveyou.png">
            <div>说出爱</div>
          </a>
        </li>
        <li class="head_bar_left_popitem_download">
          <a class="head_bar_left_iconword">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"
              class="download-client-trigger__icon">
              <path
                d="M7.23181 8.65895V1.75796C7.23181 1.33935 7.57582 1 8.00018 1C8.42453 1 8.76854 1.33935 8.76854 1.75796V8.67097L9.98589 7.47009C10.286 7.17409 10.7725 7.17409 11.0725 7.47009C11.3726 7.7661 11.3726 8.24601 11.0725 8.54201L8.54958 11.0308C8.24952 11.3268 7.76302 11.3268 7.46295 11.0308L4.94002 8.54201C4.63995 8.24601 4.63995 7.7661 4.94002 7.47009C5.24008 7.17409 5.72658 7.17409 6.02665 7.47009L7.23181 8.65895Z"
                fill="currentColor"></path>
              <path
                d="M3.48023 4.29936C2.40686 4.29936 1.53672 5.15772 1.53672 6.21656V11.5669C1.53672 12.6257 2.40686 13.4841 3.48023 13.4841H12.5198C13.5931 13.4841 14.4633 12.6257 14.4633 11.5669V6.21656C14.4633 5.15772 13.5931 4.29936 12.5198 4.29936H11.6158C11.1915 4.29936 10.8475 3.96001 10.8475 3.5414C10.8475 3.12279 11.1915 2.78344 11.6158 2.78344H12.5198C14.4418 2.78344 16 4.3205 16 6.21656V11.5669C16 13.4629 14.4418 15 12.5198 15H3.48023C1.55815 15 0 13.4629 0 11.5669V6.21656C0 4.3205 1.55815 2.78344 3.48023 2.78344H4.38418C4.80853 2.78344 5.15254 3.12279 5.15254 3.5414C5.15254 3.96001 4.80853 4.29936 4.38418 4.29936H3.48023Z"
                fill="currentColor"></path>
            </svg>
            <span>下载客户端</span>
          </a>
          <div class="popitem_download">
            <div class="popitem_download_main">
              <div class="popitem_download_main_left">
                <div class="main_left_title1">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                      d="M11.2 1.00012H8H4.80003C3.56489 1.00012 2.56006 2.00495 2.56006 3.24009V12.7599C2.56006 13.9951 3.56489 14.9999 4.80003 14.9999H11.2C12.4351 14.9999 13.4399 13.9951 13.4399 12.7599V3.24009C13.4399 2.00495 12.4351 1.00012 11.2 1.00012ZM12.1599 12.76C12.1599 13.2893 11.7293 13.7199 11.2 13.7199H4.80003C4.27067 13.7199 3.84006 13.2893 3.84006 12.76V3.24009C3.84006 2.71073 4.27068 2.28011 4.80003 2.28011H11.2C11.7293 2.28011 12.1599 2.71073 12.1599 3.24009V12.76ZM5.91992 3.7201C5.91992 3.36664 6.20646 3.08011 6.55991 3.08011H9.43987C9.79333 3.08011 10.0799 3.36664 10.0799 3.7201C10.0799 4.07356 9.79333 4.36009 9.43987 4.36009H6.55991C6.20646 4.36009 5.91992 4.07356 5.91992 3.7201ZM7.26109 12.4261C7.22089 12.329 7.2002 12.225 7.2002 12.12C7.2002 11.9078 7.28448 11.7043 7.4345 11.5543C7.58453 11.4043 7.78801 11.32 8.00018 11.32C8.21235 11.32 8.41582 11.4043 8.56585 11.5543C8.71588 11.7043 8.80016 11.9078 8.80016 12.12C8.80016 12.225 8.77947 12.329 8.73926 12.4261C8.69906 12.5232 8.64014 12.6114 8.56585 12.6856C8.49157 12.7599 8.40338 12.8189 8.30632 12.8591C8.20926 12.8993 8.10523 12.92 8.00018 12.92C7.89512 12.92 7.7911 12.8993 7.69404 12.8591C7.59698 12.8189 7.50879 12.7599 7.4345 12.6856C7.36022 12.6114 7.30129 12.5232 7.26109 12.4261Z"
                      fill="currentColor"></path>
                  </svg>
                  <span class="main_left_title1">&nbsp;手机版</span>
                </div>
                <span class="main_left_title2">扫码即可下载手机APP</span>
                <div class="main_left_QRCode"></div>
              </div>
              <div class="popitem_download_main_right">
                <div class="main_right_title1">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M16 0H0V16H16V0Z" fill="white" fill-opacity="0.01"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd"
                      d="M0.683594 2.33335C0.683594 1.97436 0.974609 1.68335 1.33359 1.68335H14.6669C15.0259 1.68335 15.3169 1.97436 15.3169 2.33335V11C15.3169 11.359 15.0259 11.65 14.6669 11.65H8.6501V13C8.6501 13.0056 8.65003 13.0111 8.64989 13.0167H12.0001C12.3591 13.0167 12.6501 13.3077 12.6501 13.6667C12.6501 14.0257 12.3591 14.3167 12.0001 14.3167H4.0001C3.64111 14.3167 3.3501 14.0257 3.3501 13.6667C3.3501 13.3077 3.64111 13.0167 4.0001 13.0167H7.35031C7.35017 13.0111 7.3501 13.0056 7.3501 13V11.65H1.33359C0.974609 11.65 0.683594 11.359 0.683594 11V2.33335ZM1.98359 2.98335V10.35H14.0169V2.98335H1.98359Z"
                      fill="currentColor"></path>
                  </svg><span class="main_right_title1">&nbsp;Window端</span>
                </div>
                <span class="main_right_title2">适合WIN系统设备</span>
                <img class="main_right_bili_icon" src="./public/bilibili.svg">
                <button class="main_right_download_btn">立即下载</button>
              </div>
            </div>
            <div class="popitem_download_footer">
              <a class="popitem_download_footer_title">点击查看更多下载内容＞</a>
            </div>
          </div>
        </li>
      </ul>
      <!-- 顶上中间搜索框 -->
      <div class="head_bar_middle_container">
        <div class="head_bar_middle_search">
          <input type="text" placeholder="原神">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd"
              d="M8 14.75C11.7279 14.75 14.75 11.7279 14.75 8C14.75 4.27208 11.7279 1.25 8 1.25C4.27208 1.25 1.25 4.27208 1.25 8C1.25 11.7279 4.27208 14.75 8 14.75ZM9.64999 5.64303C9.84525 5.44777 10.1618 5.44777 10.3571 5.64303C10.5524 5.83829 10.5524 6.15487 10.3571 6.35014L8.70718 8.00005L10.3571 9.64997C10.5524 9.84523 10.5524 10.1618 10.3571 10.3571C10.1618 10.5523 9.84525 10.5523 9.64999 10.3571L8.00007 8.70716L6.35016 10.3571C6.15489 10.5523 5.83831 10.5523 5.64305 10.3571C5.44779 10.1618 5.44779 9.84523 5.64305 9.64997L7.29296 8.00005L5.64305 6.35014C5.44779 6.15487 5.44779 5.83829 5.64305 5.64303C5.83831 5.44777 6.15489 5.44777 6.35016 5.64303L8.00007 7.29294L9.64999 5.64303Z"
              fill="#C9CCD0"></path>
          </svg>
          <button>
            <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd"
                d="M16.3451 15.2003C16.6377 15.4915 16.4752 15.772 16.1934 16.0632C16.15 16.1279 16.0958 16.1818 16.0525 16.2249C15.7707 16.473 15.4456 16.624 15.1854 16.3652L11.6848 12.8815C10.4709 13.8198 8.97529 14.3267 7.44714 14.3267C3.62134 14.3267 0.5 11.2314 0.5 7.41337C0.5 3.60616 3.6105 0.5 7.44714 0.5C11.2729 0.5 14.3943 3.59538 14.3943 7.41337C14.3943 8.98802 13.8524 10.5087 12.8661 11.7383L16.3451 15.2003ZM2.13647 7.4026C2.13647 10.3146 4.52083 12.6766 7.43624 12.6766C10.3517 12.6766 12.736 10.3146 12.736 7.4026C12.736 4.49058 10.3517 2.1286 7.43624 2.1286C4.50999 2.1286 2.13647 4.50136 2.13647 7.4026Z"
                fill="currentColor"></path>
            </svg>
          </button>
          <div class="head_bar_middle_search_panel">
            <div class="head_bar_middle_search_panel_title">bilibili热搜</div>
            <div class="head_bar_middle_search_panel_doubleItem">
              <a class="search_panel_item">
                <span class="search_panel_item_number">1</span>
                <span class="search_panel_item_content">EDG惜败TL</span>
                <img class="search_panel_item_icon" src="./public/search_panel_hot.png@28h">
              </a>
              <a class="search_panel_item">
                <span class="search_panel_item_number">2</span>
                <span class="search_panel_item_content">FPX RNG</span>
                <img class="search_panel_item_icon" src="./public/search_panel_live.gif">
              </a>
            </div>
            <div class="head_bar_middle_search_panel_doubleItem">
              <a class="search_panel_item">
                <span class="search_panel_item_number">3</span>
                <span class="search_panel_item_content">这是一个超长的字符串哈哈哈哈哈哈哈</span></span>
                <img class="search_panel_item_icon" src="./public/search_panel_hot.png@28h">
              </a>
              <a class="search_panel_item">
                <span class="search_panel_item_number">4</span>
                <span class="search_panel_item_content">Uzi获亚洲荣誉选手称号</span>
                <img class="search_panel_item_icon" src="./public/search_panel_new.png@28h">
              </a>
            </div>
            <div class="head_bar_middle_search_panel_doubleItem">
              <a class="search_panel_item">
                <span class="search_panel_item_number">5</span>
                <span class="search_panel_item_content">TES战胜LGD</span>
                <img class="search_panel_item_icon" src="./public/search_panel_live.gif">
              </a>
              <a class="search_panel_item">
                <span class="search_panel_item_number">6</span>
                <span class="search_panel_item_content">推到冲卡者辅警已被辞退</span>
              </a>
            </div>
            <div class="head_bar_middle_search_panel_doubleItem">
              <a class="search_panel_item">
                <span class="search_panel_item_number">7</span>
                <span class="search_panel_item_content">亚运征途LOL</span>
                <img class="search_panel_item_icon" src="./public/search_panel_live.gif">
              </a>
              <a class="search_panel_item">
                <span class="search_panel_item_number">8</span>
                <span class="search_panel_item_content">小潮team台球大赛</span>
                <img class="search_panel_item_icon" src="./public/search_panel_new.png@28h">
              </a>
            </div>
            <div class="head_bar_middle_search_panel_doubleItem">
              <a class="search_panel_item">
                <span class="search_panel_item_number">9</span>
                <span class="search_panel_item_content">学生证换狗是啥梗</span>
              </a>
              <a class="search_panel_item">
                <span class="search_panel_item_number">10</span>
                <span class="search_panel_item_content">多方回应劳斯莱斯被吊上44楼</span>
              </a>
            </div>
          </div>
        </div>
      </div>

      <!-- 顶上右边个人设置 -->
      <div class="head_bar_right">
        <div class="head_avatar">
          <img class="head_avatar_img" src="./public/head_avatar.webp">
          <div class="head_avatar_pop_pannel">
            <a class="head_avatar_pop_pannel_nickname">一只哔哩哔哩用户</a>
            <div class="head_avatar_pop_pannel_vip_container">
              <a class="head_avatar_pop_pannel_yearvip"></a>
              <img style="height:14px; width: 40px;" src="./public/head_avatar_pop_pannel_lv6.svg">
            </div>
            <div class="head_avatar_pop_pannel_coins">
              <a class="head_avatar_pop_pannel_coins_text">硬币:</a>
              <a class="head_avatar_pop_pannel_coins_num">40707.7</a>
              <a class="head_avatar_pop_pannel_coins_text">B币:</a>
              <a class="head_avatar_pop_pannel_coins_num">0</a>
            </div>
            <div class="head_avatar_pop_pannel_counts">
              <div class="head_avatar_pop_pannel_counts_item">
                <a class="head_avatar_pop_pannel_counts_num">285</a>
                <a class="head_avatar_pop_pannel_counts_text">关注</a>
              </div>
              <div class="head_avatar_pop_pannel_counts_item">
                <a class="head_avatar_pop_pannel_counts_num">19</a>
                <a class="head_avatar_pop_pannel_counts_text">粉丝</a>
              </div>
              <div class="head_avatar_pop_pannel_counts_item">
                <a class="head_avatar_pop_pannel_counts_num">10</a>
                <a class="head_avatar_pop_pannel_counts_text">动态</a>
              </div>
            </div>
            <a class="head_avatar_pop_pannel_VIP">
              <div class="head_avatar_pop_pannel_VIP_titel_container">
                <p class="head_avatar_pop_pannel_VIP_title">
                  大会员站庆特惠</p>
                <p class="head_avatar_pop_pannel_VIP_subtitle">
                  限时4.6折，抽五年超级大会员</p>
              </div>
              <div class="head_avatar_pop_pannel_VIP_center">会员中心</div>
            </a>
            <a class="head_avatar_pop_pannel_entry">
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"
                class="link-icon">
                <rect opacity="0.01" width="18" height="18" fill="white"></rect>
                <path
                  d="M12.1146 9.48983C13.2763 8.63331 14.0299 7.2548 14.0299 5.7035C14.0299 3.11005 11.9198 1 9.32636 1C6.73291 1 4.62286 3.11005 4.62286 5.7035C4.62286 7.2548 5.37829 8.63331 6.53808 9.48983C3.87662 10.589 2 13.2118 2 16.2648C2 16.671 2.32901 17 2.73521 17C3.14141 17 3.47042 16.671 3.47042 16.2648C3.47042 13.0335 6.09879 10.407 9.3282 10.407C12.5576 10.407 15.186 13.0354 15.186 16.2648C15.186 16.671 15.515 17 15.9212 17C16.3274 17 16.6564 16.671 16.6564 16.2648C16.6546 13.2118 14.7761 10.589 12.1146 9.48983ZM6.09144 5.7035C6.09144 3.91878 7.54348 2.46858 9.32636 2.46858C11.1092 2.46858 12.5613 3.92062 12.5613 5.7035C12.5613 7.48639 11.1092 8.93843 9.32636 8.93843C7.54348 8.93843 6.09144 7.48639 6.09144 5.7035Z"
                  fill="rgb(97, 102, 109)"></path>
              </svg>
              <span class="head_avatar_pop_pannel_entry_title">个人中心</span>
              <svg class="head_avatar_pop_pannel_entry_right_icon" width="10" height="10" viewBox="0 0 9 9" fill="none"
                xmlns="http://www.w3.org/2000/svg" class="link-icon--right">
                <path fill-rule="evenodd" clip-rule="evenodd"
                  d="M7.50588 3.40623C7.40825 3.3086 7.24996 3.3086 7.15232 3.40623L4.41244 6.14612L1.67255 3.40623C1.57491 3.3086 1.41662 3.3086 1.31899 3.40623C1.22136 3.50386 1.22136 3.66215 1.31899 3.75978L4.11781 6.5586C4.28053 6.72132 4.54434 6.72132 4.70706 6.5586L7.50588 3.75978C7.60351 3.66215 7.60351 3.50386 7.50588 3.40623Z"
                  fill="currentColor"></path>
                <path
                  d="M7.15232 3.40623L7.50588 3.75978L7.50588 3.75978L7.15232 3.40623ZM7.50588 3.40623L7.15232 3.75978L7.15233 3.75978L7.50588 3.40623ZM4.41244 6.14612L4.05888 6.49967C4.15265 6.59344 4.27983 6.64612 4.41244 6.64612C4.54504 6.64612 4.67222 6.59344 4.76599 6.49967L4.41244 6.14612ZM1.67255 3.40623L2.0261 3.05268L2.0261 3.05268L1.67255 3.40623ZM1.31899 3.40623L0.965439 3.05268L0.965439 3.05268L1.31899 3.40623ZM1.31899 3.75978L1.67255 3.40623V3.40623L1.31899 3.75978ZM4.11781 6.5586L3.76425 6.91215L4.11781 6.5586ZM4.70706 6.5586L4.35351 6.20505L4.70706 6.5586ZM7.50588 3.75978L7.15233 3.40623L7.15232 3.40623L7.50588 3.75978ZM7.50588 3.75978C7.40825 3.85742 7.24996 3.85742 7.15232 3.75978L7.85943 3.05268C7.56654 2.75978 7.09166 2.75978 6.79877 3.05268L7.50588 3.75978ZM4.76599 6.49967L7.50588 3.75978L6.79877 3.05268L4.05888 5.79257L4.76599 6.49967ZM1.31899 3.75978L4.05888 6.49967L4.76599 5.79257L2.0261 3.05268L1.31899 3.75978ZM1.67254 3.75979C1.57491 3.85742 1.41662 3.85742 1.31899 3.75979L2.0261 3.05268C1.73321 2.75978 1.25833 2.75978 0.965439 3.05268L1.67254 3.75979ZM1.67255 3.40623C1.77018 3.50386 1.77018 3.66215 1.67255 3.75978L0.965439 3.05268C0.672546 3.34557 0.672546 3.82044 0.965439 4.11334L1.67255 3.40623ZM4.47136 6.20505L1.67255 3.40623L0.965439 4.11334L3.76425 6.91215L4.47136 6.20505ZM4.35351 6.20505C4.38605 6.1725 4.43882 6.1725 4.47136 6.20505L3.76425 6.91215C4.12223 7.27013 4.70264 7.27013 5.06062 6.91215L4.35351 6.20505ZM7.15232 3.40623L4.35351 6.20505L5.06062 6.91215L7.85943 4.11334L7.15232 3.40623ZM7.15233 3.75978C7.05469 3.66215 7.05469 3.50386 7.15233 3.40623L7.85943 4.11334C8.15233 3.82045 8.15233 3.34557 7.85943 3.05268L7.15233 3.75978Z"
                  fill="currentColor"></path>
              </svg>
            </a>
            <a class="head_avatar_pop_pannel_entry">
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"
                class="link-icon">
                <rect opacity="0.01" width="18" height="18" fill="#C4C4C4"></rect>
                <path fill-rule="evenodd" clip-rule="evenodd"
                  d="M3.375 1.875H10.875C12.739 1.875 14.25 3.38604 14.25 5.25V7.875V8.625C14.25 9.03921 14.5858 9.375 15 9.375C15.4142 9.375 15.75 9.03921 15.75 8.625V7.875V5.25C15.75 2.55761 13.5674 0.375 10.875 0.375H3.375C2.33947 0.375 1.5 1.21447 1.5 2.25V15C1.5 16.0355 2.33947 16.875 3.375 16.875H6.75H7.5C7.91421 16.875 8.25 16.5392 8.25 16.125C8.25 15.7108 7.91421 15.375 7.5 15.375H6.75H3.375C3.16789 15.375 3 15.2071 3 15V2.25C3 2.04289 3.16789 1.875 3.375 1.875ZM10.4 8.51962C10.8 8.28868 10.8 7.71132 10.4 7.48038L7.7 5.92154C7.3 5.6906 6.8 5.97927 6.8 6.44115V9.55885C6.8 10.0207 7.3 10.3094 7.7 10.0785L10.4 8.51962ZM15.518 14.2511L14.3215 16.3234H11.9285L10.7321 14.2511L11.9285 12.1787H14.3215L15.518 14.2511ZM16.817 13.5011C17.0849 13.9652 17.0849 14.537 16.817 15.0011L15.6205 17.0734C15.3526 17.5375 14.8574 17.8234 14.3215 17.8234H11.9285C11.3926 17.8234 10.8974 17.5375 10.6295 17.0734L9.43302 15.0011C9.16507 14.537 9.16507 13.9652 9.43302 13.5011L10.6295 11.4287C10.8974 10.9646 11.3926 10.6787 11.9285 10.6787H14.3215C14.8574 10.6787 15.3526 10.9646 15.6205 11.4287L16.817 13.5011ZM13.125 13.3125C12.6072 13.3125 12.1875 13.7322 12.1875 14.25C12.1875 14.7678 12.6072 15.1875 13.125 15.1875C13.6428 15.1875 14.0625 14.7678 14.0625 14.25C14.0625 13.7322 13.6428 13.3125 13.125 13.3125Z"
                  fill="rgb(97, 102, 109)"></path>
              </svg>
              <span class="head_avatar_pop_pannel_entry_title">投稿管理</span>
              <svg class="head_avatar_pop_pannel_entry_right_icon" width="10" height="10" viewBox="0 0 9 9" fill="none"
                xmlns="http://www.w3.org/2000/svg" class="link-icon--right">
                <path fill-rule="evenodd" clip-rule="evenodd"
                  d="M7.50588 3.40623C7.40825 3.3086 7.24996 3.3086 7.15232 3.40623L4.41244 6.14612L1.67255 3.40623C1.57491 3.3086 1.41662 3.3086 1.31899 3.40623C1.22136 3.50386 1.22136 3.66215 1.31899 3.75978L4.11781 6.5586C4.28053 6.72132 4.54434 6.72132 4.70706 6.5586L7.50588 3.75978C7.60351 3.66215 7.60351 3.50386 7.50588 3.40623Z"
                  fill="currentColor"></path>
                <path
                  d="M7.15232 3.40623L7.50588 3.75978L7.50588 3.75978L7.15232 3.40623ZM7.50588 3.40623L7.15232 3.75978L7.15233 3.75978L7.50588 3.40623ZM4.41244 6.14612L4.05888 6.49967C4.15265 6.59344 4.27983 6.64612 4.41244 6.64612C4.54504 6.64612 4.67222 6.59344 4.76599 6.49967L4.41244 6.14612ZM1.67255 3.40623L2.0261 3.05268L2.0261 3.05268L1.67255 3.40623ZM1.31899 3.40623L0.965439 3.05268L0.965439 3.05268L1.31899 3.40623ZM1.31899 3.75978L1.67255 3.40623V3.40623L1.31899 3.75978ZM4.11781 6.5586L3.76425 6.91215L4.11781 6.5586ZM4.70706 6.5586L4.35351 6.20505L4.70706 6.5586ZM7.50588 3.75978L7.15233 3.40623L7.15232 3.40623L7.50588 3.75978ZM7.50588 3.75978C7.40825 3.85742 7.24996 3.85742 7.15232 3.75978L7.85943 3.05268C7.56654 2.75978 7.09166 2.75978 6.79877 3.05268L7.50588 3.75978ZM4.76599 6.49967L7.50588 3.75978L6.79877 3.05268L4.05888 5.79257L4.76599 6.49967ZM1.31899 3.75978L4.05888 6.49967L4.76599 5.79257L2.0261 3.05268L1.31899 3.75978ZM1.67254 3.75979C1.57491 3.85742 1.41662 3.85742 1.31899 3.75979L2.0261 3.05268C1.73321 2.75978 1.25833 2.75978 0.965439 3.05268L1.67254 3.75979ZM1.67255 3.40623C1.77018 3.50386 1.77018 3.66215 1.67255 3.75978L0.965439 3.05268C0.672546 3.34557 0.672546 3.82044 0.965439 4.11334L1.67255 3.40623ZM4.47136 6.20505L1.67255 3.40623L0.965439 4.11334L3.76425 6.91215L4.47136 6.20505ZM4.35351 6.20505C4.38605 6.1725 4.43882 6.1725 4.47136 6.20505L3.76425 6.91215C4.12223 7.27013 4.70264 7.27013 5.06062 6.91215L4.35351 6.20505ZM7.15232 3.40623L4.35351 6.20505L5.06062 6.91215L7.85943 4.11334L7.15232 3.40623ZM7.15233 3.75978C7.05469 3.66215 7.05469 3.50386 7.15233 3.40623L7.85943 4.11334C8.15233 3.82045 8.15233 3.34557 7.85943 3.05268L7.15233 3.75978Z"
                  fill="currentColor"></path>
              </svg>
            </a>
            <a class="head_avatar_pop_pannel_entry">
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"
                class="link-icon">
                <path
                  d="M7.76269 1.80538C8.3585 0.936022 9.6415 0.936021 10.2373 1.80538L11.8725 4.19132C12.0675 4.47592 12.3547 4.68457 12.6857 4.78213L15.4601 5.59999C16.4711 5.89799 16.8675 7.11819 16.2248 7.95349L14.461 10.2459C14.2506 10.5194 14.1409 10.857 14.1504 11.2019L14.2299 14.0933C14.2589 15.1468 13.2209 15.901 12.2279 15.5478L9.50257 14.5787C9.1775 14.4631 8.82251 14.4631 8.49743 14.5787L5.77211 15.5478C4.7791 15.901 3.74113 15.1468 3.77011 14.0933L3.84963 11.2019C3.85912 10.857 3.74942 10.5194 3.53902 10.2459L1.77516 7.95349C1.13247 7.11819 1.52893 5.89799 2.53986 5.59999L5.31432 4.78213C5.64526 4.68457 5.93246 4.47592 6.1275 4.19132L7.76269 1.80538Z"
                  stroke="#61666D" stroke-width="1.6"></path>
                <path
                  d="M8.64131 6.72679C8.78803 6.4295 9.21197 6.4295 9.35869 6.72679L9.78861 7.5979C9.84687 7.71595 9.9595 7.79778 10.0898 7.81671L11.0511 7.9564C11.3792 8.00408 11.5102 8.40726 11.2728 8.63868L10.5772 9.31674C10.4829 9.40863 10.4399 9.54103 10.4621 9.67079L10.6263 10.6282C10.6824 10.955 10.3394 11.2042 10.046 11.0499L9.18614 10.5979C9.06961 10.5366 8.93039 10.5366 8.81386 10.5979L7.95403 11.0499C7.66058 11.2042 7.31761 10.955 7.37365 10.6282L7.53787 9.67079C7.56012 9.54103 7.5171 9.40863 7.42283 9.31674L6.72721 8.63868C6.4898 8.40727 6.62081 8.00408 6.9489 7.9564L7.91022 7.81671C8.0405 7.79778 8.15313 7.71596 8.21139 7.5979L8.64131 6.72679Z"
                  fill="#61666D"></path>
              </svg>
              <span class="head_avatar_pop_pannel_entry_title">推荐服务</span>
              <svg class="head_avatar_pop_pannel_entry_right_icon" width="10" height="10" viewBox="0 0 9 9" fill="none"
                xmlns="http://www.w3.org/2000/svg" class="link-icon--right">
                <path fill-rule="evenodd" clip-rule="evenodd"
                  d="M7.50588 3.40623C7.40825 3.3086 7.24996 3.3086 7.15232 3.40623L4.41244 6.14612L1.67255 3.40623C1.57491 3.3086 1.41662 3.3086 1.31899 3.40623C1.22136 3.50386 1.22136 3.66215 1.31899 3.75978L4.11781 6.5586C4.28053 6.72132 4.54434 6.72132 4.70706 6.5586L7.50588 3.75978C7.60351 3.66215 7.60351 3.50386 7.50588 3.40623Z"
                  fill="currentColor"></path>
                <path
                  d="M7.15232 3.40623L7.50588 3.75978L7.50588 3.75978L7.15232 3.40623ZM7.50588 3.40623L7.15232 3.75978L7.15233 3.75978L7.50588 3.40623ZM4.41244 6.14612L4.05888 6.49967C4.15265 6.59344 4.27983 6.64612 4.41244 6.64612C4.54504 6.64612 4.67222 6.59344 4.76599 6.49967L4.41244 6.14612ZM1.67255 3.40623L2.0261 3.05268L2.0261 3.05268L1.67255 3.40623ZM1.31899 3.40623L0.965439 3.05268L0.965439 3.05268L1.31899 3.40623ZM1.31899 3.75978L1.67255 3.40623V3.40623L1.31899 3.75978ZM4.11781 6.5586L3.76425 6.91215L4.11781 6.5586ZM4.70706 6.5586L4.35351 6.20505L4.70706 6.5586ZM7.50588 3.75978L7.15233 3.40623L7.15232 3.40623L7.50588 3.75978ZM7.50588 3.75978C7.40825 3.85742 7.24996 3.85742 7.15232 3.75978L7.85943 3.05268C7.56654 2.75978 7.09166 2.75978 6.79877 3.05268L7.50588 3.75978ZM4.76599 6.49967L7.50588 3.75978L6.79877 3.05268L4.05888 5.79257L4.76599 6.49967ZM1.31899 3.75978L4.05888 6.49967L4.76599 5.79257L2.0261 3.05268L1.31899 3.75978ZM1.67254 3.75979C1.57491 3.85742 1.41662 3.85742 1.31899 3.75979L2.0261 3.05268C1.73321 2.75978 1.25833 2.75978 0.965439 3.05268L1.67254 3.75979ZM1.67255 3.40623C1.77018 3.50386 1.77018 3.66215 1.67255 3.75978L0.965439 3.05268C0.672546 3.34557 0.672546 3.82044 0.965439 4.11334L1.67255 3.40623ZM4.47136 6.20505L1.67255 3.40623L0.965439 4.11334L3.76425 6.91215L4.47136 6.20505ZM4.35351 6.20505C4.38605 6.1725 4.43882 6.1725 4.47136 6.20505L3.76425 6.91215C4.12223 7.27013 4.70264 7.27013 5.06062 6.91215L4.35351 6.20505ZM7.15232 3.40623L4.35351 6.20505L5.06062 6.91215L7.85943 4.11334L7.15232 3.40623ZM7.15233 3.75978C7.05469 3.66215 7.05469 3.50386 7.15233 3.40623L7.85943 4.11334C8.15233 3.82045 8.15233 3.34557 7.85943 3.05268L7.15233 3.75978Z"
                  fill="currentColor"></path>
              </svg>
            </a>
            <div class="head_avatar_pop_pannel_splitLine"></div>
            <a class="head_avatar_pop_pannel_entry">
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"
                class="link-icon">
                <path fill-rule="evenodd" clip-rule="evenodd"
                  d="M17.6137 9.30115C17.6932 9.10837 17.6932 8.89282 17.6137 8.70004C17.5743 8.60393 17.5165 8.51726 17.4443 8.44504L15.2221 6.22282C14.9148 5.9156 14.4176 5.91615 14.111 6.22282C13.8043 6.52948 13.8037 7.02671 14.111 7.33393L14.9921 8.21504L7.99985 8.21504C7.56596 8.21448 7.21429 8.56615 7.21429 9.00059C7.21429 9.21726 7.30207 9.41393 7.44429 9.55615C7.58651 9.69837 7.78318 9.78615 7.99985 9.78615L14.9921 9.78615L14.111 10.6673C13.8043 10.9739 13.8037 11.4712 14.111 11.7784C14.4182 12.0856 14.9154 12.085 15.2221 11.7784L17.4443 9.55615C17.5165 9.48393 17.5743 9.39726 17.6137 9.30115"
                  fill="#61666D"></path>
                <path fill-rule="evenodd" clip-rule="evenodd"
                  d="M11.8889 5.11111C9.74127 2.96349 6.25873 2.96349 4.11111 5.11111C1.96349 7.25873 1.96349 10.7413 4.11111 12.8889C6.25873 15.0365 9.74127 15.0365 11.8889 12.8889C12.1957 12.5821 12.6932 12.5821 13 12.8889C13.3068 13.1957 13.3068 13.6932 13 14C10.2387 16.7613 5.76127 16.7613 3 14C0.238731 11.2387 0.23873 6.76127 3 4C5.76127 1.23873 10.2387 1.23873 13 4C13.3068 4.30683 13.3068 4.80429 13 5.11111C12.6932 5.41794 12.1957 5.41794 11.8889 5.11111Z"
                  fill="#61666D"></path>
              </svg>
              <span class="head_avatar_pop_pannel_entry_title">退出登入</span>
            </a>
          </div>
        </div>

        <ul class="head_bar_right_entrybar">
          <li>
            <a>
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"
                class="right-entry-icon">
                <path fill-rule="evenodd" clip-rule="evenodd"
                  d="M10 1C5.02955 1 1 5.02955 1 10C1 14.9705 5.02955 19 10 19C14.9705 19 19 14.9705 19 10C19 5.02955 14.9705 1 10 1ZM10.0006 2.63614C14.0612 2.63614 17.3642 5.93996 17.3642 9.99977C17.3642 14.0604 14.0612 17.3634 10.0006 17.3634C5.93996 17.3634 2.63696 14.0604 2.63696 9.99977C2.63696 5.93996 5.93996 2.63614 10.0006 2.63614Z"
                  fill="currentColor"></path>
                <path
                  d="M13.1381 8.05573V8.05331H10.7706C10.7859 7.8643 10.7948 7.67286 10.7948 7.47981C10.7948 7.26414 10.7843 7.05008 10.7649 6.83926C10.7658 6.82552 10.7674 6.81179 10.7674 6.79725V6.79483C10.7674 6.35541 10.4111 6 9.97254 6C9.53312 6 9.17771 6.35622 9.17771 6.79483V6.79725C9.17771 6.85137 9.18336 6.90468 9.19386 6.95557L9.18255 6.95719C9.19871 7.12924 9.20759 7.30291 9.20759 7.479C9.20759 7.67286 9.19709 7.8643 9.17771 8.0525H6.74313V8.05573C6.32876 8.08239 6 8.42649 6 8.84814V8.85057C6 9.28998 6.33683 9.64216 6.77544 9.64216C6.80937 9.64216 6.8441 9.64378 6.89903 9.64297L8.7601 9.63893C8.28837 10.7294 7.47011 11.6341 6.44507 12.2149C6.44023 12.2173 6.43619 12.2197 6.43134 12.2229C6.42003 12.2294 6.40953 12.2359 6.39822 12.2423L6.39903 12.2431C6.17528 12.3837 6.02585 12.6325 6.02585 12.916V12.9184C6.02585 13.3578 6.38207 13.7132 6.82068 13.7132C6.99111 13.7132 7.14782 13.6591 7.27706 13.5687C8.7706 12.706 9.9168 11.3094 10.4556 9.64055H13.0105C13.0517 9.64136 13.1131 9.63893 13.1131 9.63893C13.5905 9.62924 13.9039 9.2916 13.9039 8.85299V8.85057C13.9047 8.42003 13.5638 8.07108 13.1381 8.05573Z"
                  fill="currentColor"></path>
                <path
                  d="M13.7731 12.5388C13.7715 12.5356 13.7691 12.5331 13.7674 12.5307C13.74 12.4814 13.7077 12.4362 13.6713 12.3942C13.1584 11.6672 12.513 11.0412 11.7674 10.5541L11.7666 10.555C11.6366 10.4613 11.4766 10.4055 11.3046 10.4055C10.8652 10.4055 10.5098 10.7617 10.5098 11.2003V11.2028C10.5098 11.5033 10.677 11.765 10.9233 11.8999C11.5615 12.3215 12.0825 12.8045 12.4944 13.4499L12.5372 13.5041C12.6786 13.6333 12.866 13.7133 13.0728 13.7133C13.5122 13.7133 13.8676 13.3571 13.8676 12.9184V12.916C13.8668 12.7795 13.8329 12.6511 13.7731 12.5388Z"
                  fill="currentColor"></path>
              </svg>
              <div class="head_bar_right_entrybar_words">大会员</div>
            </a>
          </li>
          <li>
            <a>
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"
                class="right-entry-icon">
                <path
                  d="M15.435 17.7717H4.567C2.60143 17.7717 1 16.1723 1 14.2047V5.76702C1 3.80144 2.59942 2.20001 4.567 2.20001H15.433C17.3986 2.20001 19 3.79943 19 5.76702V14.2047C19.002 16.1703 17.4006 17.7717 15.435 17.7717ZM4.567 4.00062C3.59327 4.00062 2.8006 4.79328 2.8006 5.76702V14.2047C2.8006 15.1784 3.59327 15.9711 4.567 15.9711H15.433C16.4067 15.9711 17.1994 15.1784 17.1994 14.2047V5.76702C17.1994 4.79328 16.4067 4.00062 15.433 4.00062H4.567Z"
                  fill="currentColor"></path>
                <path
                  d="M9.99943 11.2C9.51188 11.2 9.02238 11.0667 8.59748 10.8019L8.5407 10.7635L4.3329 7.65675C3.95304 7.37731 3.88842 6.86226 4.18996 6.50976C4.48954 6.15544 5.0417 6.09699 5.4196 6.37643L9.59412 9.45943C9.84279 9.60189 10.1561 9.60189 10.4067 9.45943L14.5812 6.37643C14.9591 6.09699 15.5113 6.15544 15.8109 6.50976C16.1104 6.86409 16.0478 7.37731 15.6679 7.65675L11.4014 10.8019C10.9765 11.0667 10.487 11.2 9.99943 11.2Z"
                  fill="currentColor"></path>
              </svg>
              <div class="head_bar_right_entrybar_words">消息</div>
            </a>
          </li>
          <li class="head_bar_right_updates">
            <a>
              <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"
                class="right-entry-icon">
                <g clip-path="url(#clip0)">
                  <path
                    d="M10 10.743C7.69883 10.743 5.83333 8.87747 5.83333 6.5763C5.83333 4.27512 7.69883 2.40964 10 2.40964V10.743Z"
                    stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"></path>
                  <path
                    d="M10 10.743C10 13.0441 8.1345 14.9096 5.83333 14.9096C3.53217 14.9096 1.66667 13.0441 1.66667 10.743H10Z"
                    stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"></path>
                  <path
                    d="M10 10.743C10 8.44182 11.8655 6.57632 14.1667 6.57632C16.4679 6.57632 18.3333 8.44182 18.3333 10.743H10Z"
                    stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"></path>
                  <path
                    d="M9.99999 10.743C12.3012 10.743 14.1667 12.6085 14.1667 14.9096C14.1667 17.2108 12.3012 19.0763 9.99999 19.0763V10.743Z"
                    stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"></path>
                </g>
                <defs>
                  <clipPath id="clip0">
                    <rect width="20" height="20" fill="currentColor" transform="matrix(-1 0 0 1 20 0.742981)"></rect>
                  </clipPath>
                </defs>
              </svg>
              <div class="head_bar_right_entrybar_words">动态</div>
            </a>
            <div class="head_bar_right_pop_updates">
              <ul class="head_bar_right_pop_updates_btns">
                <li class="head_bar_right_pop_updates_btn 
                                            head_bar_right_pop_updates_btn_active">视频
                </li>
                <li class="head_bar_right_pop_updates_btn">直播</li>
                <li class="head_bar_right_pop_updates_btn">专栏</li>
              </ul>
              <!-- 视频按钮显示层，用JS插入数据 -->
              <ul class="head_bar_right_pop_updates_vedios bili_scroll_bar"></ul>

              <!-- 直播按钮显示层，用art-tamplate模板引擎实现 -->
              <ul class="head_bar_right_pop_updates_lives bili_scroll_bar">
                <li class="head_bar_right_pop_updates_view_all_btn">查看全部动态 &gt</li>
              </ul>

              <ul class="head_bar_right_pop_updates_columns bili_scroll_bar">
                <li class="head_bar_right_pop_updates_noMoreTip">
                  暂时没有新动态了哦！
                </li>
                <li class="head_bar_right_pop_updates_split">
                  <div class="head_bar_right_pop_updates_splitLine"></div>
                  <div class="head_bar_right_pop_updates_split_title">历史动态</div>
                  <div class="head_bar_right_pop_updates_splitLine"></div>
                </li>
                <li class="head_bar_right_pop_updates_item">
                  <img class="head_bar_right_pop_updates_item_avatar"
                    src="./public/head_bar_right_pop_updates_item_avatar_yuanshen.webp">
                  <div class="head_bar_right_pop_updates_item_content">
                    <p class="head_bar_right_pop_updates_item_name">原神</p>
                    <p class="head_bar_right_pop_updates_item_title">分层地图？安排上啦！——06.20开发组座谈会</p>
                    <p class="head_bar_right_pop_updates_item_time">40分钟前</p>
                  </div>
                  <img class="head_bar_right_pop_updates_item_cover"
                    src="./public/head_bar_right_pop_updates_item_cover_yuanshen.webp">
                </li>
                <li class="head_bar_right_pop_updates_item">
                  <img class="head_bar_right_pop_updates_item_avatar"
                    src="./public/head_bar_right_pop_updates_item_avatar2.webp">
                  <div class="head_bar_right_pop_updates_item_content">
                    <p class="head_bar_right_pop_updates_item_name">TIC觅见丛邻</p>
                    <p class="head_bar_right_pop_updates_item_title">被一亿只蝴蝶环绕是什么体验？</p>
                    <p class="head_bar_right_pop_updates_item_time">1小时前</p>
                  </div>
                  <img class="head_bar_right_pop_updates_item_cover"
                    src="./public/head_bar_right_pop_updates_item_cover2.webp">
                </li>
              </ul>

            </div>
          </li>
          <li>
            <a>
              <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"
                class="right-entry-icon">
                <path fill-rule="evenodd" clip-rule="evenodd"
                  d="M11.0505 3.16759L12.7915 6.69573C12.954 7.02647 13.2702 7.25612 13.6349 7.30949L17.5294 7.87474C18.448 8.00817 18.8159 9.13785 18.1504 9.78639L15.3331 12.5334C15.0686 12.7905 14.9481 13.1609 15.0104 13.5256L15.6759 17.4031C15.8328 18.3184 14.8721 19.0171 14.0497 18.5845L10.5661 16.7537C10.2402 16.5823 9.85042 16.5823 9.52373 16.7537L6.04087 18.5845C5.21848 19.0171 4.2578 18.3184 4.41468 17.4031L5.07939 13.5256C5.14166 13.1609 5.02198 12.7905 4.75755 12.5334L1.9394 9.78639C1.27469 9.13785 1.64182 8.00817 2.56126 7.87474L6.4549 7.30949C6.82041 7.25612 7.13578 7.02647 7.29832 6.69573L9.04015 3.16759C9.45095 2.33468 10.6389 2.33468 11.0505 3.16759Z"
                  stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path>
                <path
                  d="M11.603 11.8739C11.413 12.5556 10.7871 13.0554 10.0447 13.0554C9.29592 13.0554 8.66679 12.5467 8.48242 11.8569"
                  stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <div class="head_bar_right_entrybar_words">收藏</div>
            </a>
          </li>
          <li>
            <a>
              <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"
                class="right-entry-icon">
                <path fill-rule="evenodd" clip-rule="evenodd"
                  d="M10 1.74286C5.02955 1.74286 1 5.7724 1 10.7429C1 15.7133 5.02955 19.7429 10 19.7429C14.9705 19.7429 19 15.7133 19 10.7429C19 5.7724 14.9705 1.74286 10 1.74286ZM10.0006 3.379C14.0612 3.379 17.3642 6.68282 17.3642 10.7426C17.3642 14.8033 14.0612 18.1063 10.0006 18.1063C5.93996 18.1063 2.63696 14.8033 2.63696 10.7426C2.63696 6.68282 5.93996 3.379 10.0006 3.379Z"
                  fill="currentColor"></path>
                <path d="M9.99985 6.6521V10.743" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"></path>
                <path d="M12.4545 10.7427H10" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"></path>
              </svg>
              <div class="head_bar_right_entrybar_words">历史</div>
            </a>
          </li>
          <li>
            <a>
              <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"
                class="right-entry-icon">
                <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="2" y="1" width="16" height="20">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 1.74286H17.5V20.0762H2.5V1.74286Z"
                    fill="currentColor"></path>
                </mask>
                <g mask="url(#mask0)">
                  <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M9.99999 1.74286C9.92916 1.74286 9.85916 1.74369 9.78833 1.74536C5.85416 1.85453 2.58416 5.14869 2.50166 9.08286C2.44999 11.5404 3.58666 13.7304 5.36999 15.1337C5.52166 15.2529 5.63166 15.4162 5.67333 15.6045L6.30416 18.447C6.51583 19.3987 7.36083 20.0762 8.33583 20.0762H11.6617C12.6383 20.0762 13.4842 19.3987 13.6958 18.4445L14.3275 15.602C14.3692 15.4154 14.4775 15.2537 14.6275 15.1354C16.3733 13.7629 17.5 11.637 17.5 9.24286C17.5 5.10036 14.1425 1.74286 9.99999 1.74286ZM10.0003 3.40939C13.2161 3.40939 15.8336 6.02606 15.8336 9.24273C15.8336 11.0386 15.0186 12.7086 13.5978 13.8252C13.1428 14.1827 12.8244 14.6852 12.7011 15.2402L12.0686 18.0827C12.0269 18.2752 11.8586 18.4094 11.6619 18.4094H8.33609C8.14109 18.4094 7.97359 18.2761 7.93192 18.0852L7.30025 15.2427C7.17609 14.6869 6.85775 14.1827 6.40109 13.8236C4.94359 12.6769 4.12942 10.9619 4.16859 9.11773C4.23192 6.05523 6.77442 3.49606 9.83442 3.41189C9.88942 3.41023 9.94525 3.40939 10.0003 3.40939Z"
                    fill="currentColor"></path>
                  <path d="M10 6.81299L8.81253 9.18726H11.1875L9.99952 11.561" stroke="currentColor" stroke-width="1.6"
                    stroke-linecap="round" stroke-linejoin="round"></path>
                </g>
                <path d="M6.66656 15.9095H13.3332" stroke="currentColor" stroke-width="1.7"></path>
              </svg>
              <div class="head_bar_right_entrybar_words">创作中心</div>
            </a>
          </li>
        </ul>
        <!-- 顶上右边投稿按钮 -->
        <button class="head_bar_right_upload">
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"
            class="header-upload-entry__icon">
            <path
              d="M12.0824 10H14.1412C15.0508 10 15.7882 10.7374 15.7882 11.6471V12.8824C15.7882 13.792 15.0508 14.5294 14.1412 14.5294H3.84707C2.93743 14.5294 2.20001 13.792 2.20001 12.8824V11.6471C2.20001 10.7374 2.93743 10 3.84707 10H5.90589"
              stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
            </path>
            <path d="M8.99413 11.2353L8.99413 3.82353" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"
              stroke-linejoin="round"></path>
            <path d="M12.0823 6.29413L8.9941 3.20589L5.90587 6.29413" stroke="currentColor" stroke-width="1.7"
              stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span class="head_bar_right_entrybar_words">投稿</span>
        </button>
      </div>
    </div>
  </header>
</body>

<script>
  //向下滚动时，head_bar固定在顶部
  let head_bar = document.querySelector('.head_bar')
  let head_bar_a = document.querySelectorAll('.head_bar_left>li>a,.head_bar_right_entrybar a')

  window.addEventListener('scroll', function () {
    if (window.scrollY > 0) {
      head_bar.classList.add('head_bar_fixed')
      //a标签的颜色变成#18191c
      head_bar_a.forEach(function (item) {
        item.style.color = '#18191c'
      })
    }
    else {
      head_bar.classList.remove('head_bar_fixed')
      head_bar_a.forEach(function (item) {
        item.style.color = 'white'
      })
    }
  })

  //搜索框的删除按钮
  let input = document.querySelector('.head_bar_middle_search>input');
  let delete_svg = document.querySelector('.head_bar_middle_search>svg');
  input.addEventListener('input', function (event) {
    console.log('hhaha')
    if (event.target.value.length > 0) {
      delete_svg.style.display = 'block';
    } else {
      delete_svg.style.display = 'none';
    }
  })

  delete_svg.addEventListener('click', function () {
    input.value = '';
    delete_svg.style.display = 'none';
    input.focus();
  })

  //游戏中心切换图片
  let game_right_list = document.querySelectorAll('.popitem_game_right_list');
  let game_right_list_img = document.querySelector('.popitem_game_right_img');

  for (let i = 0; i < game_right_list.length; i++) {
    game_right_list[i].addEventListener('mouseover', function () {
      game_right_list_img.style.display = 'block';
      game_right_list_img.style.backgroundImage = `url(./public/popitem_game_right_img${i}.webp)`
    })
    game_right_list[i].addEventListener('mouseout', function () {
      game_right_list_img.style.display = 'none';
    })
  }

  //游戏中心弹出图片动态绑定
  let live_avatars = document.querySelectorAll('.popitem_live_gird_avatar');
  for (let i = 0; i < live_avatars.length; i++) {
    live_avatars[i].style.backgroundImage = `url(./public/head_bar_left_popitem_live_avatar${i}.webp)`
  }

  //搜索框focus后圆角变化
  let head_bar_middle_search = document.querySelector('.head_bar_middle_search');
  let head_bar_middle_search_panel = document.querySelector('.head_bar_middle_search_panel');
  input.addEventListener('focus', function () {
    head_bar_middle_search_panel.style.display = 'block';
    head_bar_middle_search.style.borderRadius = '8px 8px 0 0';
    head_bar_middle_search.style.borderBottom = 'none';
  })
  input.addEventListener('blur', function () {
    head_bar_middle_search_panel.style.display = 'none';
    head_bar_middle_search.style.borderRadius = '8px';
    head_bar_middle_search.style.borderBottom = '1px solid #e3e5e7';
  })

  //动态弹出层的按钮组切换
  let head_bar_right_pop_updates_btns = document.querySelectorAll('.head_bar_right_pop_updates_btn');
  let head_bar_right_pop_bili_scroll_bar = document.querySelectorAll('.bili_scroll_bar');

  head_bar_right_pop_updates_btns.forEach((element, index) => {
    element.addEventListener('click', () => {
      // 按钮样式变化
      head_bar_right_pop_updates_btns.forEach(el => {
        el.classList.remove('head_bar_right_pop_updates_btn_active');
        el.textContent = el.textContent.replace('动态', '');
      });
      element.classList.add('head_bar_right_pop_updates_btn_active');
      if (element.textContent.indexOf('动态') == -1) {
        element.textContent = element.textContent.trim() + '动态'
      }

      //切换内容显示
      head_bar_right_pop_bili_scroll_bar.forEach(el => {
        el.style.display = 'none';
      });
      head_bar_right_pop_bili_scroll_bar[index].style.display = 'block';

    })
  });
</script>
<script src="./script/用JS实现数据插入html.js"></script>
</html>